<?php
$link = mysql_connect("localhost", "admin", "Xurpas123");
mysql_select_db("smsnic", $link);

$result = mysql_query("select * from (SELECT t.`id`, t.`nombre`,t.`fecha`,
                        IFNULL(count(*), 0) as mensajes
                        FROM (select c.id, cl.nombres, c.nombre, e.fecha, e.estado 
                        FROM 
                        `envios` e 
                        INNER JOIN `conversaciones` c on (e.`id_conv` = c.`id`)
                        INNER JOIN `mensajes` m on (e.`id_mensaje` = m.`id`)
                        INNER JOIN `telefonos` t on (e.`id_telefono` = t.`id`)
                        INNER JOIN cliente cl on (t.`telefono` like concat ('505',cl.`telefono`))
                        INNER JOIN `operadora` o on (t.`operadora_id` = o.`id`)
                        INNER JOIN estado est on (e.`estado` = est.`id`)
                        ORDER BY e.fecha) as t  
                        GROUP BY t.id) as tt WHERE tt.fecha BETWEEN '" . $fecha_ini . "' AND '" . $fecha_fin . "'", $link) or die(mysql_error());

$i = 0;
while ($rowEmp = mysql_fetch_assoc($result)) {


    $datos1[] = floatval($rowEmp['mensajes']); //$rowEmp['conteo'];
    $datos2[] = "'" . $rowEmp['nombre'] . "'";
    $datos4[] = $rowEmp['fecha'];

    $cant = floatval($rowEmp['mensajes']);
    $nombre = $rowEmp['nombre'];

    $resultdetalle = mysql_query("SELECT t.`id`, t.`nombres`, t.`nombre`,t.`fecha`,
														   IFNULL(CASE when t.`estado` = 1 then count(*) end, 0) as Enviados,
															IFNULL(CASE when t.`estado` = 2 then count(*) end, 0) as No_Enviados,
															IFNULL(CASE when t.`estado` = 3 then count(*) end,0) as Pendientes
															from (select c.id, cl.nombres, c.nombre, e.fecha,  e.estado 
														FROM 
														   `envios` e 
														  inner join `conversaciones` c on (e.`id_conv` = c.`id`)
														  inner join `mensajes` m on (e.`id_mensaje` = m.`id`)
														  inner join `telefonos` t on (e.`id_telefono` = t.`id`)
														  inner join cliente cl on (t.`telefono` like concat ('505',cl.`telefono`))
														  inner join `operadora` o on (t.`operadora_id` = o.`id`)
														  inner join estado est on (e.`estado` = est.`id`)
														  order by e.fecha) as t where t.id = " . $rowEmp['id'] . "
														group by t.id", $link) or die(mysql_error());


    $enviados = 0;
    $noenviados = 0;
    $pendientes = 0;
    while ($rowdetalle = mysql_fetch_assoc($resultdetalle)) {
        $enviados = ($rowdetalle['Enviados']>0)?$rowdetalle['Enviados']:0.001;
        $noenviados = ($rowdetalle['No_Enviados']>0)?$rowdetalle['No_Enviados']:0.001;
        $pendientes = ($rowdetalle['Pendientes']>0)?$rowdetalle['Pendientes']:0.001;
    }
    

    $slash[] = "{y: $cant, 
			color: colors[$i],
			drilldown: {
				name: '$nombre',
				categories: ['Enviados', 'No Enviados', 'Pendientes'],
				data: [$enviados, $noenviados, $pendientes],
				color: colors[$i]
			}						
		}";
    $i++;
}
?>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>


        <!-- 1. Add these JavaScript inclusions in the head of your page -->

        <script type="text/javascript" src="../graficos/js/highcharts.js"></script>

        <!-- 1a) Optional: add a theme file -->
        <!--
                <script type="text/javascript" src="../js/themes/gray.js"></script>
        -->

        <!-- 1b) Optional: the exporting module -->
        <script type="text/javascript" src="../graficos/js/modules/exporting.js"></script>


        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">
		
            var chart;
            $(document).ready(
            function() {
				
                var colors = Highcharts.getOptions().colors,
                categories = [<?php echo implode($datos2, ','); ?>], //nombre de las conversaciones
                name = 'Estado de las Conversaciones	',
                data = [
<?php
echo implode($slash, ',');
?>
                                                                ];
						

                                                                function setChart(name, categories, data, color) {
                                                                    chart.xAxis[0].setCategories(categories);
                                                                    chart.series[0].remove();
                                                                    chart.addSeries({
                                                                        name: name,
                                                                        data: data,
                                                                        color: color || 'white'
                                                                    });
                                                                }
				
                                                                chart = new Highcharts.Chart({
                                                                    chart: {
                                                                        renderTo: 'container', 
                                                                        type: 'column'
                                                                    },
                                                                    title: {
                                                                        text: 'Estado de las Conversaciones '
                                                                    },
                                                                    subtitle: {
                                                                        text: 'Click en la barra para visualizar el detalle del estado de los mensajes de cada conversacion. Click nuevamente para regresar.'
                                                                    },
                                                                    xAxis: {
                                                                        categories: categories							
                                                                    },
                                                                    yAxis: {
                                                                        title: {
                                                                            text: 'Cantidad de mensajes'
                                                                        }
                                                                    },
                                                                    plotOptions: {
                                                                        column: {
                                                                            cursor: 'pointer',
                                                                            point: {
                                                                                events: {
                                                                                    click: function() {
                                                                                        var drilldown = this.drilldown;
                                                                                        if (drilldown) { // drill down
                                                                                            setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                                                                        } else { // restore
                                                                                            setChart(name, categories, data);
                                                                                        }
                                                                                    }
                                                                                }
                                                                            },
                                                                            dataLabels: {
                                                                                enabled: true,
                                                                                color: colors[0],
                                                                                style: {
                                                                                    fontWeight: 'bold'
                                                                                },
                                                                                formatter: function() {                                                                                    
                                                                                    return Math.floor(this.y) +' sms';
                                                                                }
                                                                            }					
                                                                        }
                                                                    },
                                                                    tooltip: {
                                                                        formatter: function() {
                                                                            var point = this.point,
                                                                            s = this.x +':<b>'+ this.y +' mensajes</b><br/>';
                                                                            if (point.drilldown) {
                                                                                s += 'Click para visualizar la conversacion '+ point.category +' ';
                                                                            } else {
                                                                                s += 'Click para regresar';
                                                                            }
                                                                            return s;
                                                                        }
                                                                    },
                                                                    series: [{
                                                                            name: name,
                                                                            data: data,
                                                                            color: 'white'
                                                                        }], 
                                                                    exporting:{
                                                                        enabled: false
						

                                                                    }
                                                                });
				
				
                                                            });
			
			
				
        </script>

    </head>
    <body>

        <!-- 3. Add the container -->
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>


    </body>
</html>
